<template>
  <view class="list-card pa-10 br-10" @click="openModel">
    <view v-if="getModelValue?.length" class="fz-14" :class="[tagFlex && 'disFlx flexWarp']">
      <view
        v-for="(v, i) in getModelValue"
        :key="i"
        :class="{ disabled: getDisabled }"
        class="ma-5 tag px-11 linh-20 br-5"
      >
        {{ getValueText(v) }}
      </view>
    </view>
    <view v-else class="disFlxCC fz-12">
      <view v-if="getDisabled" class="py-22 disabledColor">暂无内容</view>
      <view v-else class="py-22 addBtn">
        <text>请选择</text>
        <text class="ant-iconfont fz-12 ml-5">&#xe77e;</text>
      </view>
    </view>
  </view>
  <SelectIndustry
    v-model:show="selectIndustryShow"
    :selected="getModelValue"
    :is-api-data="false"
    :localdata="localdata"
    result-key="code"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { computed, ref, type PropType, unref, onMounted } from 'vue';
  import SelectIndustry from '@/components/SelectIndustry/index.vue';
  import { localDataMapping } from '@/components/Form/hooks/useForm';
  import { memberTypeGetList } from '@/api/membership';
  import type { Localdata } from '@/components/Form/types';

  const props = defineProps({
    modelValue: Array as PropType<number[] | string[]>,
    placeholder: propTypes.string,
    disabled: propTypes.bool.def(false),
    /** tag flex展示 */
    tagFlex: propTypes.bool.def(false),
  });

  const emits = defineEmits(['update:modelValue']);

  const selectIndustryShow = ref(false);

  const getDisabled = computed(() => props.disabled);

  function getValueText(id: string | number) {
    return localdata.value.find((v) => v.value == id)?.text;
  }

  const getModelValue = computed((): number[] | string[] => props.modelValue || []);

  const localdata = ref<Localdata[]>([]);

  onMounted(() => {
    memberTypeGetList(['orgIndustryId']).then((res) => {
      const data = localDataMapping(res.orgIndustryId, { label: 'name', value: 'code' });
      localdata.value = data;
    });
  });

  const openModel = function () {
    if (getDisabled.value) return;
    selectIndustryShow.value = true;
  };

  function handleSubmit(ids: number) {
    emits('update:modelValue', ids);
  }
</script>

<style lang="scss" scoped>
  .list-card {
    background-color: #f8f8f8;
    .addBtn {
      color: #2878ff;
    }
    .disabledColor {
      color: #666664;
    }
    .flexWarp {
      flex-wrap: wrap;
    }
    .tag {
      color: #6ba2ff;
      border: solid 1px #6ba2ff;
      flex-shrink: 0;
      width: fit-content;
    }
    .tag.disabled {
      color: #808080;
      border: solid 1px #aaabab;
    }
  }
</style>
